import React, {Component} from 'react';
import styles from './index.less';
import PropTypes from "prop-types";

/**
 * 游戏标题
 */
class SubjectHeaderLayout extends Component {

  constructor(props) {
    super(props);
  }


  render() {
    let {text} = this.props;
    if(text.length === 2) {
      text = " " + text + " ";
    }
    const translatePos = [0, -3, -2, 1];

    return (
      <React.Fragment>
        <div className={styles.title}>
          <div className={styles.background}>
            <div className={styles.content}>
              {
                text.split("").map((content, index) => {
                  return (
                    <div
                      key={index}
                      style={{
                        transform: `translateY(${translatePos[index]}px)`,
                      }}
                    >
                      {content}
                    </div>
                  )
                })
              }
            </div>
          </div>
        </div>
      </React.Fragment>
    );
  }
}

SubjectHeaderLayout.propTypes = {
  text: PropTypes.string
}

SubjectHeaderLayout.defaultProps = {
  text: '主标题'
}

export default SubjectHeaderLayout;
